<template>
    <div>
        <div class="details_container show-pc" v-if="isPc === 1">

            <!-- <a-spin :spinning="loading" size="large" class="loading-spinner" /> -->
            <div>
                <div class="details_top" v-show="!loading">
                    <div>
                        <div class="back_button" @click="handleHome">
                            <img src="../../assets/images/new_img/箭头-01.png" alt="" class="Back_icon">
                            <span class="Back_text">返回</span>
                        </div>
                    </div>
                    <div class="middle">
                        <div class="middle_left">
                            <!-- @click="handleEnlargeImage(img)" -->
                            <div class="left_img" v-for="(item, index) in imageData.imageList" :key="index"
                                @click="imageUrl = item.imgPath">
                                <sshbImage :width="60" :height="60" :src="item.imgPath"
                                    style="border-radius: 0.2vw; margin-top: 0.52vw;">
                                </sshbImage>

                            </div>
                        </div>
                        <div class="middle_box">
                            <div class="Hostgraph-pc">
                                <a-image-preview-group @preview="handlePreview">
                                    <template v-for="(item, index) in imageData.imageList" :key="index">

                                        <a-image :src="item.imgPath" :style="{
                                            width: isPreview || item.imgPath === imageUrl ? '32vw' : '0',
                                            height: isPreview || item.imgPath === imageUrl ? 'auto' : '0',
                                            opacity: isPreview || item.imgPath === imageUrl ? '1' : '0',
                                            zIndex: item.imgPath === imageUrl && !isPreview ? '11' : '10',
                                            borderRadius: '0.52vw',
                                        }" alt="" class="imgpng" />
                                    </template>
                                </a-image-preview-group>
                            </div>
                            <div class="info_container">
                                <div
                                    style=" width: 19.1vw;display: flex;flex-direction: column;justify-content: space-between;">
                                    <div>
                                        <div class="Collect_ico" v-if="getToken()">
                                            <div>
                                                <img @click="toggleLike(imageData, '1')" v-if="imageData.isLike === '2'"
                                                    src="../../assets/images/new_img/详情空心.png" alt="" class="icfonImg">
                                                <img @click="toggleLike(imageData, '2')" v-else
                                                    src="../../assets/images/new_img/实心.png" alt="" class="icfonImg">
                                            </div>
                                            <div>
                                                <img @click="toggleCollect(imageData, '2')"
                                                    v-if="imageData.isCollect === '1'"
                                                    src="../../assets/images/new_img/实心收藏.png" alt=""
                                                    class="icfonImg—sc">
                                                <img @click="toggleCollect(imageData, '1')" v-else
                                                    src="../../assets/images/new_img/详情空心收藏.png" alt=""
                                                    class="icfonImg—sc">
                                            </div>
                                        </div>
                                        <div class="Collect_name">{{ imageData.picTitle }}</div>
                                        <div class="Collect_intro">
                                            <div class="Nmae_text">
                                                砂之船素材
                                            </div>
                                            <div class="Line"></div>
                                            <div class="id_container">
                                                <span>ID：</span>
                                                <span>{{ imageData.fodderId }}</span>
                                                <span style="margin-left: 0.72vw;">
                                                    <img src="../../assets/images/new_img/复制2.png" alt=""
                                                        @click="copyAccount(imageData.fodderId)" class="account-item"
                                                        v-show="!isCopied">
                                                    <img src="../../assets/images/new_img/已复制.png" alt=""
                                                        class="account-item" v-show="isCopied">
                                                </span>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="title_1">
                                                相关描述
                                            </div>
                                            <div class="describe-box" id="describeBox"
                                                :style="{ maxHeight: isExxpand ? '' : '50px' }">
                                                {{ imageData.picContent }}
                                            </div>
                                            <div v-if="isMoreDetailContent" @click="isExxpand = !isExxpand"
                                                class="expand-text">
                                                {{ isExxpand ? '收起' : '展开' }}
                                                <DownOutlined :class="{ 'rotate-180': isExxpand }" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Collect_box">
                                        <div class="Collect_sort">
                                            <div>
                                                <div>
                                                    <span class="title_1">类别</span>
                                                    <span style="font-size: 0.72vw; color: var(--color-text-3);">{{
                                                        imageData.columnName }}</span>
                                                </div>
                                                <div class="MaterialBox">
                                                    <div class="title_1">
                                                        格式
                                                    </div>
                                                    <div>
                                                        <a-radio-group v-model:value="checked" buttonStyle="solid">
                                                            <a-radio :value="1">{{ fileFormat }}</a-radio>
                                                            <a-radio :value="2" v-if="fileFormat2">{{ fileFormat2
                                                            }}</a-radio>
                                                            <a-radio :value="3">附件</a-radio>
                                                        </a-radio-group>

                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="author">
                                        <div class="author_info">
                                            <div class="author_text">作者</div>
                                            <div @click="TOlistOfWorks(imageData)"><img :src="imageData.avatar" alt=""
                                                    class="Name_img">
                                            </div>
                                            <div class="author_name">{{ imageData.realname }}</div>
                                        </div>
                                        <div class="follow_btn" v-if="imageData.isConcern === '2'"
                                            @click="relations(imageData, '1')">关注</div>
                                        <div class="follow_btn" v-if="imageData.isConcern === '1'"
                                            @click="relations(imageData, '2')">已关注</div>
                                        <div class="follow_btn" v-if="imageData.isConcern === '3'"
                                            @click="relations(imageData, '2')">互关</div>
                                    </div>
                                    <div class="tag-frame">
                                        <div class="tag-item" v-for="(item, index) in tagArr" :key="index"
                                            @click="selectTagName(item)">{{ item }}
                                        </div>
                                    </div>
                                    <div class="Download_bt" @click="downFile()" v-loading="loadingUpload">
                                        <a-spin :spinning="loadingUpload" size="large" class="Download_bt"
                                            tip="下载中..." />
                                        <div v-if="!loadingUpload">
                                            <span>立即下载</span>
                                        </div>
                                      
                                    </div>
                                      <div class="author_text">{{ downFprogressTips }}</div>


                                </div>
                                <div class="Line-wap"></div>

                                <div class="bottom_box">
                                    <div class="theme">
                                        <div class="logo_txet">相关主题—{{
                                            imageData.columnName }}</div>
                                        <div @click="handleTomore(imageData)" style="width: 3vw;">
                                            <span class="more_text">更多</span>
                                            <img src="../../assets/images/new_img/右箭头.png" alt="">
                                        </div>
                                    </div>
                                    <div class="related_images">
                                        <div v-for="(item, index) in images_url">
                                            <sshbImage :width="110" :height="110" :src="item.imageList[0].imgPath"
                                                style="border-radius: 0.2vw; margin-top: 0.52vw; border-radius: 0.52vw;"
                                                @click="handleEnlargeImage(item)">
                                            </sshbImage>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="close_button" @click="handleHome">
                        <img src="../../assets/images/new_img/叉.png" alt="">
                    </div>
                </div>
                <!-- 为你推荐 -->
                <div class="recommendation_section">
                    <div style="margin: 1vw 0px ;color: var(--color-text-3);" v-if="!loading">相似推荐</div>
                    <div v-if="recommendList.length != 0">
                        <Waterfall :col="3" :data-source="recommendList" :show-icon="true" :dataStatus="dataStatus"
                            :loading="loading" ref="WaterfallRef" @openEdit="openEdit" @loadData="loadData">
                            <template #default="{ item }">
                                <Card :item />
                            </template>
                        </Waterfall>
                    </div>
                </div>
            </div>
        </div>

        <div class="show-wap" v-if="isPc === 2">
            <div>
                <a-spin :spinning="loading" size="large" class="loading-spinner" />
            </div>
            <div class="wap-box" v-show="!loading">
                <!-- 主图 -->
                <div class="HostGraph">
                    <div class="HostGraph_box">
                        <sshbImage :width="1820" :height="1700" v-if="imageUrl" :src="imageUrl"
                            style="border-radius: 10px; margin-top: 10px;" preview>
                        </sshbImage>

                        <div class="Collect_ico-wap">
                            <div>
                                <div class="png-bg">
                                    <img @click="toggleLike(imageData, '1')" v-if="imageData.isLike === '2'"
                                        src="../../assets/images/new_img/空心.png" alt="" class="icfonImg-wap">
                                    <img @click="toggleLike(imageData, '2')" v-else
                                        src="../../assets/images/new_img/实心.png" alt="" class="icfonImg-wap">
                                </div>
                            </div>
                            <div>
                                <div class="png-bg">
                                    <img @click="toggleCollect(imageData, '2')" v-if="imageData.isCollect === '1'"
                                        src="../../assets/images/new_img/实心收藏.png" alt="" class="icfonImg-wap">
                                    <img @click="toggleCollect(imageData, '1')" v-else
                                        src="../../assets/images/new_img/空心收藏.png" alt="" class="icfonImg-wap">
                                </div>


                            </div>
                        </div>
                    </div>

                </div>
                <div class="middle_left-wap">

                    <div class="images-container">
                        <div class="left_img-wap" v-for="(item, index) in imageData.imageList" :key="index"
                            @click="imageUrl = item.imgPath">
                            <sshbImage :width="480" :height="460" :src="item.imgPath" class="scroll-image">
                            </sshbImage>
                        </div>
                    </div>
                </div>
                <div class="info_container-wap">
                    <div class="Collect_name-wap">{{ imageData.picTitle }}</div>
                    <div class="Collect_intro-wap">
                        <div class="Nmae_text-wap">
                            砂之船素材
                        </div>

                        <div class="id_container-wap">
                            <span>ID：</span>
                            <span>{{ imageData.fodderId }}</span>
                            <span>
                                <img src="../../assets/images/new_img/复制2.png" alt=""
                                    @click="copyAccount(imageData.fodderId)" v-show="!isCopied">
                                <img src="../../assets/images/new_img/已复制.png" alt="" v-show="isCopied">
                            </span>

                        </div>
                    </div>
                    <div>
                        <div class="title_1-wap">
                            相关描述
                        </div>
                        <div class="describe-box-wap" id="describeBox" :style="{ maxHeight: isExxpand ? '' : '50px' }">
                            {{ imageData.picContent }}

                        </div>
                        <div v-if="isMoreDetailContent" @click="isExxpand = !isExxpand" class="expand-text-wap">
                            {{ isExxpand ? '收起' : '展开' }}
                            <DownOutlined :class="{ 'rotate-180': isExxpand }" />
                        </div>
                    </div>

                    <div class="Collect_sort-wap">
                        <div style="display: flex; gap: 10px ;">
                            <div class="title_1-wap">类别</div>
                            <div style="font-size: 16px; color: var(--color-text-3);">{{ imageData.columnName }}</div>

                        </div>
                        <div class="MaterialBox-wap">
                            <div class="title_1-wap">
                                格式
                            </div>
                            <div>
                                <a-radio-group v-model:value="checked" buttonStyle="solid">
                                    <a-radio :value="1">{{ fileFormat }}</a-radio>
                                    <a-radio :value="2" v-if="fileFormat2">{{ fileFormat2 }}</a-radio>
                                    <a-radio :value="3">附件</a-radio>
                                </a-radio-group>
                            </div>
                        </div>


                    </div>
                    <div class="author-wap">
                        <div class="author_info-wap">
                            <div class="author-text-wap">作者</div>
                            <div><img :src="imageData.avatar" alt="" class="Name_img-wap">
                            </div>
                            <div class="author-name-wap">{{ imageData.realname }}</div>
                        </div>

                        <div class="follow_btn-wap" v-if="imageData.isConcern === '2'"
                            @click="relations(imageData, '1')">关注
                        </div>
                        <div class="follow_btn-wap" v-if="imageData.isConcern === '1'"
                            @click="relations(imageData, '2')">已关注
                        </div>
                        <div class="follow_btn-wap" v-if="imageData.isConcern === '3'"
                            @click="relations(imageData, '2')">互注
                        </div>
                    </div>
                    <!-- <div class="Download_bt-wap">
                        <span>立即下载</span>
                    </div> -->

                    <div class="Download_bt-wap" @click="downFile()" v-loading="loadingUpload">
                        <a-spin :spinning="loadingUpload" size="large" class="Download_bt-wap" tip="下载中..." />
                        <div v-if="!loadingUpload">
                            <span>立即下载</span>
                        </div>
                    </div>



                    <div class="bottom_box-wap">
                        <div class="theme-wap">
                            <div class="logo_txet-wap">相关主题—{{
                                imageData.columnName }}</div>
                            <div @click="handleTomore(imageData)">
                                <span class="more_text-wap">更多</span>
                                <img src="../../assets/images/new_img/右箭头.png" alt="">
                            </div>
                        </div>
                        <div class="related_images-wap">
                            <div v-for="(item, index) in images_url" :key="index" class="related_img_item-wap"
                                @click="handleEnlargeImage(item)">
                                <sshbImage :width="480" :height="460" :src="item.imageList[0].imgPath"
                                    class="itemImg-wap">
                                </sshbImage>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 为你推荐 -->
            <div class="recommendation_section-wap" v-if="!loading">
                <div style="padding: 10px 0px;color: var(--color-text-3);">相似推荐</div>
                <div style="margin: 0px 10px;" v-if="recommendList.length != 0">
                    <Waterfall :col="3" :data-source="recommendList" :show-icon="true" :dataStatus="dataStatus"
                        :loading="loading" @loadData="loadData">
                        <template #default="{ item }">
                            <Card :item />
                        </template>
                    </Waterfall>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import { ref, nextTick, onMounted } from 'vue';
import Waterfall from '@/components/Waterfall/index.vue'
import { useRoute, useRouter } from 'vue-router'
import sshbImage from '@/sshbComponents/sshbImage/index.vue';
import { useHttp } from '@/api/http'
import { useStore } from '@/store'
const { themeStore } = useStore()
import { getToken } from '@/utils/token'
const router = useRouter()
const route = useRoute()
const images_url = ref([]);//相关主题
const list = ref([])
const describeHeight = ref(1)




// 用于控制是否显示"已复制"提示
const isCopied = ref(false);

// 复制操作
const copyAccount = (id) => {
    const account = id;
    const tempInput = document.createElement('input');
    tempInput.value = account;
    document.body.appendChild(tempInput);


    tempInput.select();
    document.execCommand('copy');

    // 删除临时输入框
    document.body.removeChild(tempInput);

    // 显示复制成功提示
    isCopied.value = true;

    // 3秒后隐藏提示
    setTimeout(() => {
        isCopied.value = false;
    }, 3000);
};






const handleHome = () => {
    window.close();

}
const isPc = ref(0)
// 模拟数据加载
onMounted(() => {

    if (window.innerWidth >= 800) {
        isPc.value = 1
    } else {
        isPc.value = 2
    }
    themeStore.searcShow.txet = '';


    themeStore.searcShow.visible = !themeStore.searcShow.visible
    setTimeout(() => {
        loading.value = false
    }, 1000) // 1.5秒后关闭加载状态
})

// 加载状态控制
const dataStatus = ref(true)
const loading = ref(false)
const indexNum = ref(0)

// 获取详情数据
const imageData = ref({
    imageList: []
});
const tagArr = ref([]);
const checked = ref(1);
const imageUrl = ref("");
const similarList = ref([]); // 相似图片
const recommendList = ref(
    []
); // 推荐瀑布流数据
const lastElement = ref([])  //相关主题的的id
const queryParams = ref({
    pageNo: 1,
    pageSize: 15,
})

const isMoreDetailContent = ref(false)
const isExxpand = ref(true)
const fileIdList = ref([])
// 获取详情页数据
// 获取详情页数据
const getDetail = () => {

    useHttp.get('/web/index/getByPicId', {
        picId: route.params.id
    }).then(res => {

        console.log(res, '请求数据11')
        console.log(res.result.imageList, '请求数据')
        // 去除富文本标签（保留纯文本）
        if (res.result.picContent) {
            const cleanText = res.result.picContent.replace(/<[^>]+>/g, '');
            res.result.picContent = cleanText;
        }

        tagArr.value = methods.getSplitData(res.result.tagName) || []
        res.result.columnName = res.result.columnName.replace(/,/g, '-');
        let imageQuery = []
        let url = ''
        // if (route.query.url) {
        //     url = atob(route.query.url)
        //     imageQuery = methods.deepClone([res.result.imageList[0]])
        //     imageQuery[0].imgAbridgePath = url
        //     imageQuery[0].imgPath = url
        //     imageQuery[0].imgId = imageQuery[0].imgId + 1
        //     console.log(imageQuery, '打印')
        // }


        if (route.query.url) {
            try {
                // 完整解码步骤：对应编码时的 encodeURIComponent → btoa → encodeURIComponent
                // 1. 先解码外层的 URI 编码（对应编码时的最后一步 encodeURIComponent）
                const uriDecoded = decodeURIComponent(route.query.url);
                // 2. Base64 解码（对应编码时的 btoa）
                const base64Decoded = atob(uriDecoded);
                // 3. 还原中文（对应编码时的 encodeURIComponent + unescape）
                const decodedUrl = decodeURIComponent(escape(base64Decoded));

                // 赋值解码后的 URL
                url = decodedUrl;

                // 后续逻辑保持不变
                imageQuery = methods.deepClone([res.result.imageList[0]]);
                imageQuery[0].imgAbridgePath = url;
                imageQuery[0].imgPath = url;
                imageQuery[0].imgId = imageQuery[0].imgId + 1;
                console.log(imageQuery, '打印');
            } catch (error) {
                console.error('url 解码失败：', error);
                // 解码失败时的 fallback 处理（可选）
                url = atob(route.query.url)
                imageQuery = methods.deepClone([res.result.imageList[0]])
                imageQuery[0].imgAbridgePath = url
                imageQuery[0].imgPath = url
                imageQuery[0].imgId = imageQuery[0].imgId + 1
                url = '';
            }
        }

        res.result.imageList = [...imageQuery, ...res.result.imageList]
        imageData.value = res.result
        if (res.result.fileId) {
            fileIdList.value = res.result.fileId
                .split(',')
                .filter(url => url.trim() !== '')
                .map(url => url.trim());
        }



        // if (route.query.image) {
        //     imageUrl.value = route.query.image
        // } else {
        //     if (url) {
        //         imageUrl.value = url
        //     } else {
        //         imageUrl.value = res.result.imageList[0].imgPath
        //     }
        // }

        // 直接在赋值处嵌入解码逻辑（假设所有来源的链接都经过了统一编码）
        if (route.query.url) { // 这里参数名改为 "url"，与编码时一致
            try {
                const uriDecoded = decodeURIComponent(route.query.url);
                const base64Decoded = atob(uriDecoded);
                const decodedImage = decodeURIComponent(escape(base64Decoded)); // 注意顺序：先 escape 再 decodeURIComponent
                imageUrl.value = decodedImage;
            } catch (error) {
                imageUrl.value = route.query.image

            }
        } else {
            if (url) {
                try {
                    const uriDecoded = decodeURIComponent(url);
                    const base64Decoded = atob(uriDecoded);
                    const decodedImage = decodeURIComponent(escape(base64Decoded));
                    imageUrl.value = decodedImage;

                } catch (error) {
                    imageUrl.value = url
                }
            } else {
                try {
                    const uriDecoded = decodeURIComponent(res.result.imageList[0].imgPath);
                    const base64Decoded = atob(uriDecoded);
                    const decodedImage = decodeURIComponent(escape(base64Decoded));
                    imageUrl.value = decodedImage;
                } catch (error) {
                    imageUrl.value = res.result.imageList[0].imgPath
                }
            }
        }
        // 截取最后一个id
        let array = res.result.columnId.split(',');
        lastElement.value = array[array.length - 1];
        getFileFormat()
        getpicRelatedList()

        nextTick(() => {
            getDescribeBoxHeight()
            getrecommendList()
        })
    })
}
// 控制详情消息展开
const getDescribeBoxHeight = () => {
    if (document.getElementById('describeBox').offsetHeight === 0) {
        setTimeout(() => {
            getDescribeBoxHeight()
        }, 10)
        return
    }
    if (document.getElementById('describeBox').offsetHeight >= 50) {
        isMoreDetailContent.value = true
        isExxpand.value = false
    }
}
getDetail()
// 素材
const openEdit = (item, index) => {
    UploadWorksRef.value.edit(item, index)
}

// 相关主题数据
const getpicRelatedList = () => {
    useHttp.get('/web/index/picRelatedList', {
        picId: route.params.id,
        columnId: lastElement.value
    }).then(res => {
        images_url.value = res.result

    })
}


// 推荐瀑布流数据
const getrecommendList = () => {
    indexNum.value++
    if (!dataStatus.value || loading.value) return
    loading.value = true
    useHttp.get('/web/index/similarityList', {
        picId: route.params.id,
        ...queryParams.value
    }).then(res => {
        loading.value = false
        recommendList.value.push(...res.result.records)
        if (res.result.records.length < queryParams.value.pageSize) {
            dataStatus.value = false
        }
    })
}



// 加载数据
const loadData = () => {
    if (recommendList.value.length === 0) return
    queryParams.value.pageNo += 1
    getrecommendList()
}


// 点赞
const toggleLike = async (item, val) => {
    useHttp.get('/web/my/myLike', {
        picId: item.id,
    }).then((res) => {

        item.isLike = val;
        message.success(res.message)
    })
}

// 收藏
const toggleCollect = async (item, val) => {

    useHttp.get('/web/my/myCollect', {
        picId: item.id,
    }).then((res) => {
        item.isCollect = val;
        message.success(res.message)
    })
}

// 格式化附件名
const fromatFiles = (url) => {
    let name = decodeURI(url.split('/')[url.split('/').length - 1])
    if (name.split('?')) {
        name = name.split('?')[0]
    }

    return name
}

// 关注按钮
const relations = (data, status) => {
    if (status === '2') {
        useHttp.post('/web/relations/unfollow', {
            quiltPublicityUserId: imageData.value.createUserId
        }).then(res => {
            data.isConcern = status
            message.success(res.message)
        })
    } else {
        useHttp.post('/web/relations/add', {
            quiltPublicityUserId: imageData.value.createUserId
        }).then(res => {

            data.isConcern = res.result.isConcern
            message.success(res.result.msg)
        })
    }
}

// 用户主页
const TOlistOfWorks = (item) => {
    themeStore.searcShow.txet = '';
    themeStore.searcShow.visible = !themeStore.searcShow.visible
    themeStore.searcShow.inputValue = ''
    themeStore.activeKey = 0
    router.push({
        path: '/listOfWorks/' + item.createUserId,
    })

}

// 选择标签
const selectTagName = (name) => {
    window.localStorage.setItem('tagName', name)
    document.getElementById('tagId').click()
}

const loadingUpload = ref(false);
const downFprogressTips = ref('')
// 下载按钮
const downFile = async () => {

    if (!methods.authorization('system:pc:down')) {
        message.warning('暂无权限');
        return;
    }


    if (loadingUpload.value) return
    loadingUpload.value = true
    const params = {
        picId: imageData.value.id,
        downloadType: checked.value,
        picUrl: '',
    }
    if (checked.value === 1) {
        params.picUrl = imageUrl.value
        methods.createLinkAndDownload(imageUrl.value, imageData.value.picTitle).then(() => {
            loadingUpload.value = false
        })
    } else if (checked.value === 3) {

        const zip = new JSZip();

        let zipList = []
        let noZipList = []
        for (let i of fileIdList.value) {
            // if(methods.isCompressedFile(i)) {
            //     zipList.push(i)
            // }else {
            //     noZipList.push(i)
            // }
            noZipList.push(i)
        }


        // 处理zipList：改为串行下载（一个完成再下一个）+ 进度输出
        for (let i = 0; i < zipList.length; i++) {
            const url = zipList[i];
            try {
                // 监听当前文件下载进度
                const response = await fetch(url);
                const contentLength = parseInt(response.headers.get('Content-Length') || '0', 10);
                const reader = response.body.getReader();
                let loaded = 0;

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    loaded += value.length;
                    const progress = ((loaded / contentLength) * 100).toFixed(1);
                    console.log(`zipList 文件 ${i+1}/${zipList.length} 下载进度：${progress}%`);
                }
                // 下载完成后执行原有下载逻辑
                await methods.createLinkAndDownload(url, imageData.value.picTitle);
            } catch (error) {
                console.error(`zipList 文件 ${i+1} 下载失败：`, error);
            } finally {
                // 仅当是最后一个文件时才关闭loading，避免提前关闭
                if (i === zipList.length - 1) {
                    loadingUpload.value = false;
                }
            }
        }

        // 处理noZipList：改为串行下载（替代map+Promise.all）+ 进度输出
        // 遍历noZipList，逐个处理，前一个完成再开始下一个
        for (let i = 0; i < noZipList.length; i++) {
            const url = noZipList[i];
            try {
                // 监听当前文件下载进度
                const response = await fetch(url);
                const contentLength = parseInt(response.headers.get('Content-Length') || '0', 10);
                const reader = response.body.getReader();
                const chunks = [];
                let loaded = 0;

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    chunks.push(value);
                    loaded += value.length;
                    const progress = ((loaded / contentLength) * 100).toFixed(1);
                    downFprogressTips.value = `文件 ${i+1}/${noZipList.length} 下载进度：${progress}%`
                    console.log(`noZipList 文件 ${i+1}/${noZipList.length} 下载进度：${progress}%`);
                }

                // 合并为blob（替代原response.blob()，保持后续逻辑一致）
                const blob = new Blob(chunks, {
                    type: response.headers.get('Content-Type') || 'application/octet-stream'
                });

                // 原有文件名处理逻辑完全不变
                let filename = decodeURIComponent(url.split('?')[0].split('/').pop().split('?')[0]);
                console.log('filename', filename)
                let fileNames = []
                for (let [index, item] of filename.split('.').entries()) { // 修复变量名冲突：i→item
                    if (index !== filename.split('.').length - 1) {
                        fileNames.push(item)
                    }
                }
                filename = fileNames.join('.').slice(0, fileNames.join('.').length - 13) + imageData.value.fodderId + '.' + filename.split('.')[filename.split('.').length - 1]
                zip.file(filename, blob);

            } catch (error) {
                console.error(`noZipList 文件 ${i+1} 处理失败：`, error);
            }
        }

        // 等待所有noZipList文件处理完成后，生成zip并下载（原有逻辑不变）
        const content = await zip.generateAsync({ type: "blob" });
        saveAs(content, imageData._rawValue.picTitle);
        loadingUpload.value = false;

    } else {
        params.picUrl = imageData.value.imageList[0].imgPath
        // methods.createLinkAndDownload(imageData.value.fileId, imageData.value.picTitle).then(() => {
        //     loadingUpload.value = false
        // })
    }
    useHttp.get('/web/my/myDownload', params).then(res => { })
}
// 下载附件按钮
const downFileS = async (file) => {
    if (loadingUpload.value) return
    loadingUpload.value = true
    const params = {
        picId: imageData.value.id,
        downloadType: checked.value,
        picUrl: file,
    }
    methods.createLinkAndDownload(file, imageData.value.picTitle).then(() => {
        loadingUpload.value = false
    })
    useHttp.get('/web/my/myDownload', params).then(res => { })
}

// 格式
const fileFormat = ref('');
const fileFormat2 = ref('');
const getFileFormat = () => {
    // if (imageData.value.fileId) {
    //     fileFormat2.value = methods.getFileFormat(imageData.value.fileId)
    // }
    fileFormat.value = methods.getFileFormat(imageUrl.value)

}

// 更多图片点击
const handleEnlargeImage = (item) => {
    useHttp.get('/web/index/getByPicId', {
        picId: item.id
    }).then(res => {
        tagArr.value = methods.getSplitData(res.result.tagName) || []
        imageData.value = res.result
        imageUrl.value = res.result.imageList[0].imgPath
        imageData.value.videoUrl = methods.getSplitData(imageData.value.videoUrl)
        // 截取最后一个id
        let array = res.result.columnId.split(','); // 使用split方法通过逗号分隔字符串，生成数组
        lastElement.value = array[array.length - 1]; // 获取数组的最后一个元素
        window.scrollTo(0, 0);
        getFileFormat()
    })
}

// 跳转更多
const handleTomore = (item) => {
    const firstColumnId = item.columnId.split(',')[0];

    themeStore.menuList.forEach((menu, index) => {
        if (menu.id === firstColumnId) {
            themeStore.activeKey = index += 1

        }
    });



    Object.assign(themeStore.searcShow, {
        txet: item.columnName.split(',')[0],
        title: item.columnName.split(',')[0],
        columnId: firstColumnId,
        keyWord: "",
        inputValue: ''
    });
    try {
        document.getElementById('searchIndex').click()
    } catch (e) {
        console.log(e);
        router.push({
            path: `/standardPath/`,
            query: {
                ...themeStore.searcShow,
            }
        })

    }





    // router.push({ path: '/standardPath/', });
}
</script>

<style lang="less" scoped>
.details_container {
    width: 100vw;
    margin: 0 auto;
    margin-top: 0.31vw;
    background-color: var(--color-bg-12);


    .details_top {
        padding: 4.16vw 0px;
        display: flex;
        justify-content: space-between;
        padding-left: 1.04vw;
        padding-right: 1.56vw;

        .back_button {
            margin-left: 0.52vw;
            display: flex;
            align-items: center;
            gap: 0.46vw;
            cursor: pointer;

            .Back_icon {
                width: 0.98vw;
                height: 0.72vw;

            }

            .Back_text {
                font-size: 0.83vw;
                color: var(--color-text);
                cursor: pointer;
            }
        }

        .middle {
            display: flex;
            gap: 1.92vw;

            .middle_left {
                width: 3.64vw;
                height: auto;
                max-height: 35.9vw;
                background-color: var(--color-bg-20);
                border-radius: 10px;
                overflow-y: auto;
                flex-shrink: 0;
                align-self: flex-start;
                padding: 0.2vw;

                .left_img {
                    display: grid;
                    align-items: center;
                    justify-content: center;
                    row-gap: 1.04vw;
                }
            }

            .middle_box {

                width: 57.5vw;
                min-height: 35.9vw;
                background-color: var(--color-bg-20);
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                gap: 18px;
                padding: 20px;
                box-sizing: border-box;
                transition: height 0.3s ease;

                .Hostgraph-pc {
                    width: 34.2vw;
                    min-height: 34.2vw;
                    margin: 0.52vw;
                    margin-top: 1vw;
                    margin-bottom: 1vw;
                    overflow-y: auto;
                    position: relative;


                    .imgpng {
                        width: 100% !important;
                        display: block;
                        position: absolute;
                        left: 0;
                        top: 0;
                        overflow: hidden;
                    }

                    // 鼠标移入蒙层
                    :deep(.ant-image-mask) {
                        border-radius: 0.52vw;
                        /* 设置你想要的圆角大小 */

                    }

                    .ant-image {

                        position: absolute;
                    }





                    /* 修改图片放大后的背景色 */
                    :global(.ant-image-preview-wrap) {
                        background-color: rgba(0, 0, 0, 0.9) !important;
                    }

                    // 修改图片放大后的切换按钮
                    :global(.ant-image-preview-switch-left),
                    :global(.ant-image-preview-switch-right) {
                        width: 3vw !important;
                        height: 3vw !important;

                        line-height: 40px !important;
                        background-color: rgba(0, 0, 0, 0.5) !important;
                        color: #fff !important;
                    }

                    :global(.ant-image-preview-switch-left) {

                        position: fixed;
                        left: 10%;
                    }

                    :global(.ant-image-preview-switch-right) {

                        position: fixed;
                        right: 10%;
                    }

                }

                // 图片查看分页器
                .ant-image-preview-switch-right,
                .ant-image-preview-switch-left {
                    width: 500px !important;
                    height: 500px !important;
                    min-width: 50px !important;
                    padding: 0 !important;
                    margin: 0 !important;
                    font-size: 24px !important;
                    line-height: 50px !important;
                    background-size: contain !important;
                }





                .info_container {
                    position: sticky;
                    top: 4.5vw;
                    margin-top: 1vw;
                    width: 19.1vw;
                    height: auto;
                    display: grid;


                    .Collect_ico {

                        display: flex;
                        align-items: center;
                        gap: 1.04vw;

                        .icfonImg {
                            width: 1.25vw;
                            height: 1.25vw;
                            cursor: pointer;
                        }

                        .icfonImg—sc {
                            width: 1.1vw;
                            height: 1.1vw;
                            margin-bottom: 0.2vw;
                            cursor: pointer;
                        }
                    }


                    .Collect_name {

                        font-size: 1.14vw;
                        color: var(--color-text-3);
                        margin: 0.2vw 0px;

                    }

                    .Collect_intro {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 0.52vw;

                        margin-bottom: 0.52vw;

                        .Nmae_text {
                            font-size: 0.83vw;
                            color: var(--color-text-3);
                            // margin: 0.52vw 0px;
                        }

                        .Line {
                            height: 0.72vw;
                            border-left: 1px solid #333333;
                        }

                        .id_container {
                            color: var(--color-text);
                            display: flex;
                            align-items: center;
                            gap: 0.26vw;
                            font-size: 0.72vw;



                            .account-item {
                                width: 0.625vw;
                                height: 0.625vw;
                                cursor: pointer;
                            }

                        }
                    }

                    .title_1 {
                        color: var(--color-text);
                        margin-right: 0.52vw;
                        font-size: 0.72vw;
                        white-space: nowrap;
                    }


                    .describe-box {
                        width: 100%;
                        text-indent: 2em;
                        color: var(--color-text-3);
                        font-size: 0.72vw;
                        overflow: hidden;
                        line-height: 1vw;
                        padding: 0.52vw 0vw;
                        transition: max-height 0.3s ease;
                        overflow: hidden;
                    }

                    .expand-text {
                        width: 100%;
                        color: var(--color-text-3);
                        font-size: 0.72vw;
                        text-align: center;
                        cursor: pointer;
                        margin-top: 0.52vw;
                    }





                    .anticon-down {
                        transition: transform 0.3s ease;
                        margin-left: 4px;
                    }

                    .rotate-180 {
                        transform: rotate(180deg);
                    }

                    .Collect_sort {
                        color: var(--color-text);

                        display: grid;
                        gap: 0.52vw;
                        margin: 0.83vw 0px;

                        .title_1 {
                            color: var(--color-text);
                            margin-right: 0.52vw;
                            font-size: 0.72vw
                        }

                        .MaterialBox {
                            display: flex;
                            align-items: center;
                            margin-top: 0.6vw;

                            .custom-radio-group :deep(.ant-radio-wrapper) {
                                color: var(--color-text-3) !important;
                                font-size: 0.72vw;

                            }
                        }

                        .attachmentbox {
                            width: 100%;
                            display: flex;


                            .link_box {
                                display: flex;
                                align-items: center;
                                justify-content: space-around;
                                color: var(--color-text-3);
                                font-size: 0.72vw;
                                margin-right: 0.52vw;

                                .link {
                                    margin-bottom: 0.2vw;
                                    margin-right: 0.52vw;
                                    display: inline-block;
                                    max-width: 15vw;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;

                                }

                                .xaiz_box {
                                    width: 0.8vw;
                                    height: 0.8vw;

                                    .xaiz-img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        cursor: pointer;
                                    }
                                }
                            }

                        }
                    }

                    .author {

                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        color: var(--color-text);
                        // margin: 1vw 0px;


                        .author_info {
                            display: flex;
                            align-items: center;
                            gap: 0.52vw;
                            font-size: 0.72vw;

                            .Name_img {
                                width: 1.45vw;
                                height: 1.45vw;
                                border-radius: 50%;
                                object-fit: cover;
                                cursor: pointer;
                            }

                            .author_text {
                                color: var(--color-text);
                            }

                            .author_name {
                                color: var(--color-text-3);
                            }

                        }

                        .follow_btn {
                            width: 2.60vw;

                            height: 1.56vw;
                            text-align: center;
                            line-height: 1.56vw;
                            border-radius: 0.41vw;
                            background-color: var(--color-btn-b);
                            color: var(--color-text);
                            font-size: 0.72vw;
                            cursor: pointer;

                        }


                    }

                    .tag-frame {
                        padding-top: 10px;

                        .tag-item {
                            display: inline-block;
                            padding: 2px 10px;
                            border-radius: 999px;
                            border: 1px solid #bbb;
                            font-size: 0.8vw;
                            color: #6d6e70;
                            margin-top: 5px;
                            margin-right: 10px;
                            cursor: pointer;
                            transition: all .3s;
                        }

                        .tag-item:hover {
                            color: #000;
                            background-color: #edf2f5;
                        }
                    }

                    .Download_bt {
                        width: 100%;
                        height: 1.92vw;
                        background-color: var(--btn-b-lj);
                        color: var(--btn-color);
                        border-radius: 0.31vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 0.52vw;

                        margin: 1vw 0vw;
                        cursor: pointer;
                        font-size: 0.72vw;

                        img {
                            width: 1.14vw;
                            height: 1.14vw;

                        }

                    }

                    .Download_bt:hover {
                        background-color: #d7000e;
                    }

                    .Line-wap {
                        border: 0.10vw solid var(--border-b2);
                        margin-top: 1vw;
                    }

                    .bottom_box {
                        width: 100%;

                        margin-top: 1vw;



                        .theme {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            // margin-top: 1vw;
                            margin-bottom: 1vw;



                            .logo_txet {
                                font-size: 0.83vw;
                                color: var(--color-text);
                            }

                            .more_text {
                                font-size: 0.72vw;
                                color: var(--color-text);
                                cursor: pointer;
                            }

                            div:last-child {
                                display: flex;
                                align-items: center;
                                gap: 0.2vw;

                                img {
                                    width: 0.52vw;
                                    height: 0.52vw;
                                }
                            }
                        }

                        .related_images {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: flex-start;
                            gap: 0.60vw;
                            border-radius: 0.52vw;

                            .related_img_item {
                                flex: 0 0 calc(25% - 0.15vw);
                                box-sizing: border-box;

                                .itemImg {
                                    width: 100%;
                                    height: 5.72vw;
                                    border-radius: 0.52vw;
                                    object-fit: cover;
                                }
                            }
                        }


                    }
                }
            }



        }

        .close_button {
            width: 0.72vw;
            height: 0.72vw;
            cursor: pointer;

        }

        .close_button>img {
            width: 100%;
            height: 100%;

        }


    }

    // pc端


}


.recommendation_section {
    padding: 1.04vw;
    background-color: var(--color-bg-20);
    border-radius: 0.52vw;
    font-size: var(--text-18);
    font-weight: bold;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: var(--text-22);
    color: var(--color-text);
}

// 手机
.show-wap {
    .wap-box {
        width: 95%;
        margin: 0 auto;


        .HostGraph {

            margin: 0 auto;

            .HostGraph_box {

                position: relative;



                .Collect_ico-wap {
                    position: absolute;
                    bottom: 10px;
                    display: flex;
                    gap: 10px;
                    margin-left: 10px;

                    .png-bg {
                        width: 35px;
                        height: 35px;
                        background-color: rgba(0, 0, 0, 0.5);
                        border-radius: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;


                        .icfonImg-wap {
                            width: 20px;
                            height: 20px;
                            z-index: 99;
                            position: relative;
                        }
                    }
                }
            }

        }


        .middle_left-wap {
            width: 100%;

            background-color: var(--color-bg-20);
            border-radius: 10px;
            display: flex;
            margin: 20px 0px;
            padding: 10px;

            .images-container {
                width: 100%;
                overflow-x: auto;
                display: flex;
                gap: 10px;

                /* 隐藏滚动条 */
                scrollbar-width: none;

                /* Firefox */
                &::-webkit-scrollbar {
                    display: none;
                    /* Chrome/Safari */
                }
            }

            .left_img-wap {
                flex: 0 0 auto;

            }

            .scroll-image {
                width: 200px;
                height: 200px;
                border-radius: 4px;
                object-fit: cover;
            }
        }

        .info_container-wap {
            // width: 95%;
            display: grid;
            gap: 10px;
            height: auto;

            .Collect_ico-wap {
                display: flex;
                gap: 20px;




            }

            .Collect_name-wap {
                // margin-top: 1.5vw;
                font-size: 18px;
                color: var(--color-text-3);
                font-weight: normal;
                font-stretch: normal;
            }

            .Collect_intro-wap {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;
                margin-bottom: 10px;

                .Nmae_text-wap {
                    font-size: 16px;

                    color: var(--color-text-3);
                }

                .Line-wap {
                    height: 14px;
                    border-left: 1px solid #333333;
                }

                .id_container-wap {
                    color: var(--color-text);
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    font-size: 16px;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-left: 6px;
                    }
                }
            }

            .title_1-wap {
                color: var(--color-text);
                margin-right: 0.52vw;
                font-size: 16px;
            }

            .describe-box-wap {
                width: 100%;
                text-indent: 2em;
                color: var(--color-text-3);
                font-size: 16px;
                overflow: hidden;
                padding: 0.52vw 0vw;
                transition: max-height 0.3s ease;
                overflow: hidden;
            }

            .expand-text-wap {
                width: 100%;
                color: var(--color-text-3);
                font-size: 16px;
                text-align: center;
                cursor: pointer;
                margin-top: 0.52vw;

            }

            .Collect_sort-wap {
                color: var(--color-text);
                // margin: 0.72vw 0;
                display: grid;
                gap: 10px;



                .MaterialBox-wap {
                    display: flex;
                    gap: 10px;

                    .title_1-wap {
                        color: var(--color-text);
                        margin-right: 0.52vw;
                        font-size: 16px;
                    }

                    .custom-radio-group :deep(.ant-radio-wrapper) {
                        color: var(--color-text-3) !important;
                        font-size: 16px;

                    }
                }
            }

            .author-wap {
                // height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: var(--color-text);


                .author_info-wap {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-size: 16px;
                    margin: 10px 0px;

                    .author-text-wap {
                        color: var(--color-text);
                    }

                    .author-name-wap {
                        color: var(--color-text-3);
                    }

                    .Name_img-wap {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                }

                .follow_btn-wap {
                    width: 50px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    background-color: var(--color-btn-b);
                    border-radius: 8px;
                    color: var(--color-text);
                    font-size: 14px;
                    cursor: pointer;
                    margin-right: 10px;
                }


            }

            .Download_bt-wap {
                width: 100%;
                height: 40px;
                background-color: var(--btn-b-lj);
                border-radius: 6px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
                color: var(--btn-color);
                margin: 10px 0px;
                cursor: pointer;
                font-size: 16px;
                // margin-right: 4px;

                img {
                    width: 23px;
                    height: 23px;

                }
            }

            .bottom_box-wap {
                width: 100%;
                margin-top: 10px;
                padding-top: 10px;
                border-top: 2px solid var(--border-b2);



                .theme-wap {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                    margin-bottom: 10px;



                    .logo_txet-wap {
                        font-size: 18px;
                        color: var(--color-text);
                    }

                    .more_text-wap {
                        font-size: 16px;
                        color: var(--color-text);
                        white-space: nowrap;
                    }

                    div:last-child {
                        display: flex;
                        align-items: center;
                        gap: 4px;

                        img {
                            width: 10px;
                            height: 10px;
                        }
                    }
                }

                .related_images-wap {
                    width: calc(100vw - 20px);
                    max-width: 100%;
                    display: flex;
                    overflow-x: auto;
                    flex-wrap: nowrap;
                    gap: 10px;
                    padding: 10px;
                    border-radius: 10px;
                    background-color: var(--color-bg-20);
                    /* 隐藏滚动条（可选） */
                    scrollbar-width: none;

                    &::-webkit-scrollbar {
                        display: none;

                    }
                }

                .related_img_item-wap {
                    flex: 0 0 auto;
                    width: auto;
                    overflow: hidden;

                }

                .itemImg-wap {
                    width: 100%;
                    height: auto;
                    max-width: 100%;
                    border-radius: 4px;
                    object-fit: cover;

                }







            }
        }

    }

    .recommendation_section-wap {
        margin-top: 20px;
        background-color: var(--color-bg-20);
        border-radius: 10px;
        font-size: 18px;
        font-weight: bold;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-size: 18px;
        color: var(--color-text);


    }
}
</style>